<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '用户中心',
    layout: false,
    'app-plus': {
      background: '#f8f8f8',
    },
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view class="page">
    <!-- <wd-navbar :custom-style="`padding-top: ${safeAreaInsets?.top}px;`">
    </wd-navbar> -->
    <view class="header pt-status">
      <view class="flex content items-center">
        <view class="avatar">
          <text v-if="userStore.userInfos.userName">
            {{ userStore.userInfos.userName.charAt(userStore.userInfos.userName.length - 1) }}
          </text>
        </view>
        <view class="user-info flex-1">
          <view class="name">{{ userStore.userInfos.userName }}</view>
          <view class="code">{{ userStore.userInfos.user.username }}</view>
        </view>
        <view class="cuIcon-right"></view>
      </view>
    </view>
    <view class="nav">
      <picker
        mode="selector"
        class="flex-1"
        :range="tenantList"
        style="width: 100%; font-size: 35rpx"
        range-key="label"
        @change="onSelectTenant"
        :value="activeIndex"
      >
        <view class="item">
          <text class="cuIcon-profile"></text>
          <view class="t">当前账套</view>
          {{ currentTenantName }}

          <text class="cuIcon-right text-gray"></text>
        </view>
      </picker>
      <view class="line"></view>
      <view class="item" @click="toPage('/pages/login/password')">
        <text class="cuIcon-lock"></text>
        <view class="t">修改密码</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
      <view class="item" @click="toPage('/pages/index/signature')">
        <text class="cuIcon-calendar"></text>
        <view class="t">电子签名</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
      <view class="item" @click="toPage('/pages/setting/set-font-size')">
        <text class="cuIcon-wenzi"></text>
        <view class="t">字体大小</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
      <view class="item" @click="toPage('/pages/setting/index')">
        <text class="cuIcon-settings"></text>
        <view class="t">软件版本</view>
        <view v-if="version" style="margin-right: 10px">V{{ version }}</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
      <view class="item" @click="toPage('/pages/setting/useAndHelpList')">
        <text class="cuIcon-question"></text>
        <view class="t">使用与帮助</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
      <view class="line"></view>
      <view class="item" @click="handleLogout">
        <text class="cuIcon-exit"></text>
        <view class="t">退出</view>
        <text class="cuIcon-right text-gray"></text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import { useSetting } from '@/stores/setting';
import cache from '@/utils/cache';
import showModal from '@/utils/modal';
import { ClearClientId, login } from '@/service/user';
import { queryPersionTenantList } from '@/service/tenant';

const userStore = useUserStore();
const setting = useSetting();
const version = ref('');
const handleLogout = function () {
  showModal({
    content: '确定退出当前账号吗？',
  }).then(async () => {
    // #ifdef APP-PLUS
    try {
      await ClearClientId(plus.push.getClientInfo().clientid);
    } catch (error) {
      console.log(error, 2222);
    }

    // #endif
    cache.remove('token');
    uni.redirectTo({ url: '/pages/login/login' });
    // #ifdef APP-PLUS
    plus.runtime.setBadgeNumber(-1);
    plus.runtime.setBadgeNumber(0);
    //  #endif
  });
};

const toPage = function (page: string) {
  uni.navigateTo({
    url: page,
  });
};
const activeIndex = ref(0);
const showTenantList = function () {};
const tenantList = ref([]);
const currentTenantName = ref('');
const userCode = ref('');
const getCompanyList = () => {
  if (!userCode.value) return;
  queryPersionTenantList({ tenantType: 2, userCode: userCode.value })
    .then((res) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg || '获取失败',
          icon: 'none',
        });
        tenantList.value = [];
        return;
      }

      tenantList.value = res.data.map((item) => {
        return {
          label: item.simpleName,
          value: item.id,
          code: item.code,
        };
      });
      activeIndex.value = tenantList.value.findIndex(
        (item) => +item.value === +cache.get('tenantId'),
      );
    })
    .catch(() => {
      tenantList.value = [];
    });
};

const onSelectTenant = (e) => {
  const pwd = cache.get('pwd');
  const currentTenant = tenantList.value[e.detail.value];
  currentTenantName.value = currentTenant.label;
  cache.set('tenantName', currentTenant.label);
  cache.set('tenantId', currentTenant.value);
  cache.set('tenantCode', currentTenant.value.code);
  const token = cache.get('token');
  cache.set('token', '');
  userStore.storeToken('');

  login({
    username: userCode.value,
    password: pwd,
    tenantId: currentTenant.value,
  })
    .then((res) => {
      const { access_token } = res;
      userStore.storeToken(access_token);
      cache.set('tenantId', currentTenant.value);
      cache.set('tenantName', currentTenantName.value);
      cache.set('tenantCode', currentTenant.value.code);
      // #ifdef APP-PLUS
      setTimeout(() => {
        plus.runtime.restart();
      }, 300);
      // #endif
      // userStore.getUser();
    })
    .catch(() => {
      cache.set('token', token);
      userStore.storeToken(token);
    });
};

onShow(() => {
  // #ifdef APP-PLUS
  plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
    version.value = widgetInfo.version;
  });
  // #endif
});

const init = function () {
  if (cache.get('tenantName')) {
    currentTenantName.value = cache.get('tenantName');
  }
  if (cache.get('userCode')) {
    userCode.value = cache.get('userCode');
  }
  getCompanyList();
  userStore.getUser();
};
init();
</script>
<style scoped lang="scss">
page {
  background-color: #f8f8f8;
}

.page {
  height: 100%;
  background-color: #f8f8f8;
}

.header {
  padding-bottom: 90rpx;
  color: #fff;
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);

  .content {
    padding: 48rpx;
  }

  .avatar {
    width: 90rpx;
    height: 90rpx;
    margin-right: 24rpx;
    font-size: 52rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #f3f3f3;
    border-radius: 6rpx;
  }

  .user-info {
    .name {
      font-size: 36rpx;
    }

    .code {
      font-size: 30rpx;
    }
  }
}

// .nav {
//   padding: 30rpx 40rpx;
//   border-radius: 60rpx;
//   border-bottom: 1rpx solid #f1f1f1;
//   background: #fff;
//   margin-top: -70rpx;
//   min-height: calc(100vh - 500rpx);
// }
// .wd-cell-group {
//   ~ .wd-cell-group {
//     margin-top: 24rpx;
//   }
// }

// .tenant-ifo {
//   justify-content: flex-end;
//   .tenant-name {
//     font-size: 30rpx;

//     // overflow: hidden;
//     // text-overflow: ellipsis;
//     white-space: nowrap;
//   }

//   .wd-icon-arrow-right {
//     color: var(--wot-cell-arrow-color, rgb(0 0 0 / 25%));
//   }
// }

.nav {
  min-height: calc(100vh - 500rpx);
  padding: 30rpx 40rpx;
  margin-top: -70rpx;
  background: #fff;
  border-bottom: 1rpx solid #f1f1f1;
  border-radius: 60rpx;
}

.nav .item {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  line-height: 80rpx;
}

.item .t {
  flex: 1;
  margin-left: 30rpx;
  text-align: left;
}

.line {
  height: 1rpx;
  margin: 30rpx auto;
  background-color: #f1f1f1;
}
</style>
